<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>User Manage</title>
    <link rel="stylesheet" type="text/css" href="/css/userHome.css">
    <link rel="stylesheet" type="text/css" href="/css/user.css">
    <script type="text/javascript" src="js/index.js"></script>
    <script>
        function controlDIV1() {
            document.getElementById("ocrResult1").style.display="";
            document.getElementById("ocrResult2").style.display="none";
            document.getElementById("ocrResult3").style.display="none";
        }
        function controlDIV2() {
            document.getElementById("ocrResult1").style.display="none";
            document.getElementById("ocrResult2").style.display="";
            document.getElementById("ocrResult3").style.display="none";
        }
        function controlDIV3() {
            document.getElementById("ocrResult1").style.display="none";
            document.getElementById("ocrResult2").style.display="none";
            document.getElementById("ocrResult3").style.display="";
        }
    </script>

</head>
<body>
<div id="box">
    <!-- <div class="box1">
        <form action="/operation/searchNewspaperByName" method="post">
            <input type="text" name="newspaperName" placeholder="请输入报刊名"
                   id="inputName" /> <input type="submit" value="点击搜索"
                                            id="submitSearch">
        </form>
    </div> -->
    <%@ include file="userHeader.jsp"%>
    <div class="box2">
        <div class="box3">
            <table border="2" id="table">
                <tr height="40px">
                    <th style="text-align: center; width: 50%">报刊图片</th>
                    <th style="text-align: center;">报刊名称</th>
                    <th style="text-align: center;">报刊价格</th>
                    <th style="text-align: center;">出版人</th>
                    <th style="text-align: center;">出版时间</th>
                </tr>
                <c:forEach items="${page.list[0].newspapers }" var="newspaper">
                    <tr align="center">
                        <td rowspan="6"><img src="/imgResources/${newspaper.picture }" id="newspaper"></td>
                        <td>${newspaper.name }</td>
                        <td>${newspaper.price }</td>
                        <td>${newspaper.publisher }</td>
                        <td>${newspaper.date }</td>
                    </tr>
                </c:forEach>
                <tr align="center">
                    <th colspan="8">标题</th>
                </tr>
                <tr>
                    <td colspan="8">
                        <ui>
                            <li style="float: left; width:calc(100% / 3)">
                                <button style="background-color: #28c1d3;width: 100%;height: 100%"
                                        onclick="controlDIV1()">001
                                </button>
                            </li>
                            <li style="float: left; width:calc(100% / 3)">
                                <button style="background-color: #28c1d3;width: 100%;height: 100%"
                                        onclick="controlDIV2()">002
                                </button>
                            </li>
                            <li style="float: left; width:calc(100% / 3)">
                                <button style="background-color: #28c1d3;width: 100%;height: 100%"
                                        onclick="controlDIV3()">003
                                </button>
                            </li>
                        </ui>
                    </td>
                </tr>
                <tr align="center">
                    <th colspan="8">内容</th>
                </tr>
                <tr>
                    <td id="ocrResult1" rowspan="2" colspan="8" >${page.list[0].titles[0].ocrResult}</td>
                    <td id="ocrResult2" rowspan="2" colspan="8" style="display: none">${page.list[0].titles[1].ocrResult}</td>
                    <td id="ocrResult3" rowspan="2" colspan="8" style="display: none">${page.list[0].titles[2].ocrResult}</td>
                </tr>
            </table>
        </div>
        <div class="box4">
            <div class="box5">
                总共有${page.totalPageNum }页，总共有${page.totalCount }个数据；&nbsp;&nbsp; <a
                    href="/loginContorller/userPage?page=1" style="color: black">首页</a>&nbsp;&nbsp;
                <a href="/loginContorller/userPage?page=${page.prePageNum }" style="color: black">上一页</a>&nbsp;&nbsp;
                <a href="/loginContorller/userPage?page=${page.nextPageNum }"
                   style="color: black">下一页</a>&nbsp;&nbsp; <a
                    href="/loginContorller/userPage?page=${page.totalPageNum }" style="color: black">末页</a>&nbsp;&nbsp;
            </div>
        </div>
    </div>
</div>
</body>
</html>